<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!-- 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" /> -->
		<link rel="stylesheet" type="text/css" href="css/sui.css" />
		<link rel="stylesheet" type="text/css" href="css/sui-flex.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<link rel="stylesheet" type="text/css" href="index.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<script src="./js/iconfont.js"></script>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="control.css" />
		<title></title>
		<style>
			body {
			/* background-color: #203CF4; */
			overflow-x: hidden;
			overflow-y: hidden;
		}
		.sui-list-item:last-child{
			background-image: none;
		}	
		
		.list-box{
			width: 22vw;
			max-width: 22vw;
			padding: 0rem;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		.list-box .list-title{
			width: 100%;
			color: #999999;
			padding: 0.5rem;
		}
		
		.list-box .list-title p{
			color: #FFFFFF;
			font-size: 0.8rem;
		}
		
		.list-box .list-title i{
			color: #FFFFFF;
			font-size: 0.8rem;
		}
		
		.list-circle{
			height: 17vh;
			width: 25vw;
		}
		
		.list-chart{
			height: 17vh;
			width: 20vw;
		}
		
		.box-center{
			width: 40vw;
			max-width: 40vw;
		}
		
		#circle_2{
			/* height: 60vh; */
			width: 40vw;
		}
		
		#chart2{
			/* height: 24vh; */
			width: 40vw;
		}
		
		.text-title{
			text-align: center;
			color: #888888 !important;
		}
		
	
	
		
	</style>

	</head>

	<body>
		<header class="sui-bar sui-bar-nav top-box" style="height: 85px;box-shadow: 0px 2px 1px rgba(0,0,0,0.5)">
			<!-- <a class="sui-btn sui-pull-left" id="sui-back">
				<span class="sui-iconfont sui-icon-left"></span>
			</a> -->
			<div class="sui-title" style="height: 85px; line-height: 85px;">智慧水务系统</div>
			<div class="sui-pull-right" id="sui-back">
				<img src="img/menu.png" id="icon-menu" />
			</div>
		</header>
		<div class="sui-wrap  back-box"id="datas">
			<div class="sui-flex-col sui-flex-middle btop-box" >
				<div class="data-box sui-flex-col sui-flex-middle" >
					<span class="data-title" style="color: #156EA0;font-weight: 700;">请选择日期</span>
					<input v-model="queryDate" type="date" class="data-input" v-on:change="dateChanged" />
				</div>
				<p class="sui-flex-1"></p>
				<div class="href_box" onclick="sui.open('data.html')">
					<span>泵房数据分析</span>
					<i class="sui-iconfont sui-icon-right" ></i>
				</div>
				
			</div>

			<div class="sui-flex-row" style="overflow-y:auto;height: 80vh;margin-top: 0rem;">


				<div class="sui-flex-col sui-flex-between" style="width: 100%;margin-top: 1rem;">
					<div class="list-box  animated fadeInUp">
						<div class="list-title sui-flex-col ">
							<p class="sui-flex-1 text-title">高压区泵组能效</p>
							<!-- <i class="sui-iconfont sui-icon-refresh" @click="refresh(1)"></i> -->
						</div>
						<div id="circle_1" class="list-chart" @click="echatClick(0)">
						</div>
					</div>

					<div class="list-box  animated fadeInUp">
						<div class="list-title sui-flex-col ">
							<p class="sui-flex-1 text-title">高压区泵组千吨水能耗 </p>
							<!-- <i class="sui-iconfont sui-icon-refresh" @click="refresh(1)"></i> -->
						</div>
						<div id="chart1_1" class="list-chart" @click="echatClick(0)">
						</div>
					</div>


					<div class="list-box  animated fadeInUp">
						<div class="list-title sui-flex-col ">
							<p class="sui-flex-1 text-title">高压区泵组扬程曲线 </p>
							<!-- <i class="sui-iconfont sui-icon-refresh" @click="refresh(1)"></i> -->
						</div>
						<div id="chart1_2" class="list-chart" @click="echatClick(0)">
						</div>
					</div>

					<div class="list-box  animated fadeInUp">
						<div class="list-title sui-flex-col ">
							<p class="sui-flex-1 text-title">高压区泵组用水曲线 </p>
							<!-- <i class="sui-iconfont sui-icon-refresh" @click="refresh(1)"></i> -->
						</div>
						<div id="chart1_3" class="list-chart" @click="echatClick(0)">
						</div>
					</div>
				</div>

				<div class="sui-flex-col sui-flex-between" style="width: 100%;margin-top: 1rem;">
					<div class="list-box  animated fadeInUp">
						<div class="list-title sui-flex-col ">
							<p class="sui-flex-1  text-title">中压区泵组能效</p>
							<!-- <i class="sui-iconfont sui-icon-refresh" @click="refresh(1)"></i> -->
						</div>
						<div id="circle_2" class="list-chart" @click="echatClick(0)">
						</div>
					</div>

					<div class="list-box  animated fadeInUp">
						<div class="list-title sui-flex-col ">
							<p class="sui-flex-1  text-title">中压区泵组千吨水能耗 </p>
							<!-- <i class="sui-iconfont sui-icon-refresh" @click="refresh(1)"></i> -->
						</div>
						<div id="chart2_1" class="list-chart" @click="echatClick(0)">
						</div>
					</div>


					<div class="list-box  animated fadeInUp">
						<div class="list-title sui-flex-col ">
							<p class="sui-flex-1  text-title">中压区泵组扬程曲线 </p>
							<!-- <i class="sui-iconfont sui-icon-refresh" @click="refresh(1)"></i> -->
						</div>
						<div id="chart2_2" class="list-chart" @click="echatClick(0)">
						</div>
					</div>

					<div class="list-box  animated fadeInUp">
						<div class="list-title sui-flex-col ">
							<p class="sui-flex-1  text-title">中压区泵组用水曲线 </p>
							<!-- <i class="sui-iconfont sui-icon-refresh" @click="refresh(1)"></i> -->
						</div>
						<div id="chart2_3" class="list-chart" @click="echatClick(0)">
						</div>
					</div>
				</div>

				<div class="sui-flex-col sui-flex-between" style="width: 100%;margin-top: 1rem;">
					<div class="list-box  animated fadeInUp">
						<div class="list-title sui-flex-col ">
							<p class="sui-flex-1  text-title">低压区泵组能效</p>
							<!-- <i class="sui-iconfont sui-icon-refresh" @click="refresh(1)"></i> -->
						</div>
						<div id="circle_3" class="list-chart" @click="echatClick(0)">
						</div>
					</div>

					<div class="list-box  animated fadeInUp">
						<div class="list-title sui-flex-col ">
							<p class="sui-flex-1  text-title">低压区泵组千吨水能耗</p>
							<!-- <i class="sui-iconfont sui-icon-refresh" @click="refresh(1)"></i> -->
						</div>
						<div id="chart3_1" class="list-chart" @click="echatClick(0)">
						</div>
					</div>


					<div class="list-box  animated fadeInUp">
						<div class="list-title sui-flex-col ">
							<p class="sui-flex-1 text-title">低压区泵组扬程曲线 </p>
							<!-- <i class="sui-iconfont sui-icon-refresh" @click="refresh(1)"></i> -->
						</div>
						<div id="chart3_2" class="list-chart" @click="echatClick(0)">
						</div>
					</div>

					<div class="list-box  animated fadeInUp">
						<div class="list-title sui-flex-col ">
							<p class="sui-flex-1  text-title">低压区泵组用水曲线 </p>
							<!-- <i class="sui-iconfont sui-icon-refresh" @click="refresh(1)"></i> -->
						</div>
						<div id="chart3_3" class="list-chart" @click="echatClick(0)">
						</div>
					</div>
				</div>

			</div>



			<p class="top-info animated fadeInDown" style="top:3rem">泵组数据分析</p>


		</div>


		<script type="application/javascript" src="lib/sui.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
		<script type="application/javascript" src="js/common.js"></script>
		<script type="application/javascript" src="js/vue.min.js"></script>
		<script type="application/javascript" src="js/chart.js?v=202003051153"></script>
		<script type="application/javascript" src="data2.js?vision=2020022522304152"></script>

		<script type="text/javascript">

		</script>

	</body>

</html>
